
<template>
	<div style="width: 100vw;" ref="scroll" id="all">

		<div class="section">
			<div class="t1">
				<div class="div2" style="width: 100%;">
					<div v-show="islogin" style=" display: inline;">
						<table style="width:60%;margin: auto;">
							<tr>
								<td class="title" style="text-align: left;">
									<p @click="registers()" style="text-align: center;margin-top: 20%;color: red;font-size: 20px;">
										首次登录请先完成账户注册>>></p>
									<div style="display: inline-block;width: 70%;margin-left: 30%;margin-top: 3%;">
										<form>
											<span>手机号：<input v-model="phone" id="phone" style="height: 30px;width: 260px"
													type="text" name="phone" placeholder="请输入手机号" required></span>
											<br />
											验证码：<input v-model="dcode" style="height: 30px;width: 260px;margin-top: 11px"
												type="text" name="pwd" placeholder="请输入验证码">
											<el-button v-show="show" style="color: red;margin-left: 10px;border: none;"
												id="hq" @click="yan()">获取验证码</el-button>
											<el-button v-show="!show"
												style="color: red;margin-left: 10px;border: none;">{{count}}s
											</el-button>
											<br />
											<el-button type="primary" @click="login()" class="ipt">登录</el-button>
										</form>
									</div>
									
									<p style="margin-top: 100px;"></p>
									<el-divider>其他方式</el-divider>
									<a
										href="https://open.weixin.qq.com/connect/qrconnect?appid=wx300c5c2045683f30&redirect_uri=http://www.51mydoor.com&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect">
										<img title="微信" alt="微信"
											src="//sf6-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/wechat.e0ff124.svg"
											class="oauth-btn" style="margin-left: 47.5%;" />
									</a>
									<p style="text-align: center;font-size: 15px;color: #808080;">已完成注册但未绑定微信的用户请先使用手机号登录后绑定微信</p>
								</td>
							</tr>
						</table>
					</div>
					
					<div style=" display: inline" v-show="!islogin">
						<table style="width:60%;margin: auto;margin-top: 80px;">
							<tr>
								<td class="title" style="text-align: left;">
									<p style="text-align: center;color: red;">已购卡用户请输入卡号密码进行绑定，获取VIP权限</p>
									<p style="text-align: center;color: red;">温馨提示：信息绑定后则不可修改，请务必认真填写</p>
									<div style="display: inline-block;width: 70%;margin-left: 30%;margin-top: 20px;">
										<el-form :model="neweditForm">
											<span>卡<span style="margin-left: 2em;"></span>号：
												<input v-model="neweditForm.cardCode"
													style="height: 30px;width: 260px" type="text" name="phone"
													placeholder="非必填项, 无卡用户可忽略">
											</span><br />
											<span>初始密码：
												<input v-model="neweditForm.codepwd"
													style="height: 30px;width: 260px;margin-top: 10px;" type="text"
													name="phone">
											</span><br />
											<span>姓<span style="margin-left: 2em;"></span>名：
												<input v-model="neweditForm.nickName"
													style="width: 260px;margin-top: 10px;" type="text" maxlength="12"
													name="phone" required></span><br />
											<span>就读学校：
												<input v-model="neweditForm.school"
													style="width: 260px;margin-top: 10px;" type="text"
													name="phone" required></span><br />
											<span><span>科<span style="margin-left: 2em;"></span>类： </span>
												<el-select v-model="neweditForm.majorType" placeholder="请选择"
													style="width: 265px;margin-top: 10px;">
													<el-option v-for="item in mm" :key="item.value" :label="item.lable"
														:value="item.value">
													</el-option>
												</el-select>
											</span></br>
											<span><span>高考年份： </span>
												<el-date-picker v-model="neweditForm.year" type="year" placeholder="选择年"
													style="width: 265px;display: inline-block;margin-top: 10px;">
												</el-date-picker>
											</span></br>
											<span>手<span
													style="margin-left: 0.5em;margin-right: 0.5em;">机</span>号：
												<input v-model="neweditForm.phone" id="phone"
													style="width: 260px;margin-top: 10px;" type="text"
													name="phone" placeholder="注意：一个手机号只能注册(绑定)一个账号" required></span>
													<br />
											验<span style="margin-left: 0.5em;margin-right: 0.5em;">证</span>码：
											<input v-model="code" style="width: 260px;margin-top: 11px"
												type="text" name="pwd" placeholder="请输入验证码">
											<el-button style="color: red;margin-left: 10px;border: none;" v-show="shows" id="hq"
												@click="obtain()">获取验证码</el-button>
												<el-button v-show="!shows"
													style="color: red;margin-left: 10px;border: none;">{{counts}}s
												</el-button>
												<br/>
											<el-button type="primary" @click="submitForm()" class="ipt"
												style="margin-left: 82px;width: 120px;">注册</el-button>
												<el-button type="primary" @click="gologin()" class="ipt"
													style="margin-left: 20px;width: 120px;">登录</el-button>
										</el-form>
									</div>
								</td>
							</tr>
						</table>
					</div>
					
				</div>
			</div>
		</div>
	</div>
	
	
</template>
<script>
	import {
		request
	} from "../../util/request.js"
	import {
		weixin
	} from '@/assets/js/weixin.js'
	export default {
		inject: ['reload'],
		data() {
			return {
				islogin:true,
				mendaostu:{},
				policys: [],
				zx: [],
				code: '',
				wxid:'',
				wxcode: [],
				dcode: '',
				phone: '',
				show: true,
				shows:true,
				counts:'',
				count: '',
				timer: null,
				timers:null,
				neweditForm: {
					id: '',
					nickName: '',
					cardCode: '',
					codepwd: '',
					school: '',
					majorType: '',
					year: '',
					phone: '',
					openid:''
				},
				stu: {
					id: '',
					name: '',
					major: '',
					sex: '',
					birthdayDate: '',
					nation: '',
					school: '',
					address: '',
					politic: '',
					languagesMsg: '',
					stuType: '',
					visionRight: '',
					visionLeft: '',
					height: '',
					weight: '',
					isEligible: '',
					updateDate: '',
				},
				mm: [{
						lable: "文科",
						value: "2"
					},
					{
						lable: "理科",
						value: "1"
					}
				]
			}
		},
		methods: {
			// wxlogin(){
			// 	request({
			// 		method: 'POST',
			// 		url: 'sysUser/wxlogin',
			// 		data: this.wxid
			// 	}).then(msg => {
			// 		if(msg.data.state===0){
			// 			this.$message({
			// 				message: "登录成功！",
			// 				type: "success"
			// 			});
			// 			console.log("登录成功");
			// 			this.reload();
			// 			sessionStorage.setItem(msg.data.tokenInfo.tokenName, msg.data.tokenInfo.tokenValue)
			// 			sessionStorage.setItem('user', JSON.stringify(msg.data.user[0]))
			// 			this.$router.push({
			// 				name: 'home'
			// 			});
			// 		}else{
			// 			console.log("还是先去注册吧"+msg);
			// 			this.$alert('请先注册一个账号', '提示', {
			// 			          confirmButtonText: '确定',
			// 			          callback: action => {
			// 						  this.activeName="second"
			// 			          }
			// 			        });
			// 		}
			// 	})
			// },
			// weixin() {
			// 	var obj = new WxLogin({
			// 		self_redirect: true,
			// 		id: "login_container",
			// 		appid: "wx300c5c2045683f30",
			// 		scope: "snsapi_login",
			// 		redirect_uri: "http://stu.51mydoor.com",
			// 		state: "STATE",
			// 		style: "",
			// 		href: ""
			// 	});
			// 	console.log(obj.appid)
			// 	request({
			// 		method: 'GET',
			// 		url: 'https://open.weixin.qq.com/connect/qrconnect',
			// 		params: {
			// 			appid: obj.appid,
			// 			redirect_uri: obj.redirect_uri,
			// 			response_type: 'code',
			// 			scope: obj.scope,
			// 			state: obj.state
			// 		},
			// 	}).then(msg => {
			// 		console.log(msg)
			// 		this.wxcode = msg
			// 		console.log("传回来的code" + this.wxcode)
			// 	})
			// },
			registers() {
				this.islogin=false
			},
			gologin(){
				this.islogin=true
			},
			obtain() {
				const _this = this
				const TIME_COUNT = 60
				if (_this.neweditForm.phone != null && _this.neweditForm.phone != "") {
					request({
						method: 'POST',
						url: 'sysUser/syan',
						params: {
							phone: this.neweditForm.phone
						}
					}).then(msg => {
						if (msg.code == 0 || msg.code == 200) {
							if (!_this.timers) {
								_this.counts = TIME_COUNT;
								_this.shows = false;
								_this.timers = setInterval(() => {
									if (this.counts > 0 && this.counts <= TIME_COUNT) {
										this.counts--;
									} else {
										this.shows = true;
										clearInterval(this.timers);
										this.timers = null;
									}
								}, 1000)
							}
							this.$message({
								message: msg.msg,
								type: 'success'
							});
						} else {
							this.$message({
								message: msg.msg,
								type: 'error'
							});
						}

					})
				} else {
					this.$message({
						message: "请输入手机号！",
						type: 'error'
					});
				}
			},
			yan() {
				const _this = this
				const TIME_COUNT = 60
				if (_this.phone != null && _this.phone != "") {
					request({
						method: 'POST',
						url: 'sysUser/yan',
						params: {
							phone: this.phone
						}
					}).then(msg => {
						if (msg.code == null || msg.code == 0) {
							if (!_this.timer) {
								_this.count = TIME_COUNT;
								_this.show = false;
								_this.timer = setInterval(() => {
									if (this.count > 0 && this.count <= TIME_COUNT) {
										this.count--;
									} else {
										this.show = true;
										clearInterval(this.timer);
										this.timer = null;
									}
								}, 1000)
							}
							this.$message({
								message: msg.msg,
								type: 'success'
							});
						} else {
							this.$message({
								message: msg.msg,
								type: 'error'
							});
						}
					})
				} else {
					this.$message({
						message: "请输入手机号！",
						type: 'error'
					});
				}
			},
			submitForm() {
				const _this = this
				if (this.neweditForm.cardCode == null || this.neweditForm.cardCode == '') {
					this.$message({
						message: "请输入卡号！",
						type: 'error'
					});
				} else if (this.neweditForm.codepwd == null || this.neweditForm.codepwd == '') {
					this.$message({
						message: "请输入密码！",
						type: 'error'
					});
				} else if (this.neweditForm.nickName == null || this.neweditForm.nickName == '') {
					this.$message({
						message: "请输入姓名！",
						type: 'error'
					});
				}else if (this.neweditForm.school == null || this.neweditForm.school == '') {
					this.$message({
						message: "请输入学校名称！",
						type: 'error'
					});
				} else if (this.neweditForm.year == null || this.neweditForm.year == '') {
					this.$message({
						message: "请选择高考年份！",
						type: 'error'
					});
				} else if (this.neweditForm.phone == null || this.neweditForm.phone == '') {
					this.$message({
						message: "请输入手机号码！",
						type: 'error'
					});
				} else if (this.code == null || this.code == '') {
					this.$message({
						message: "请输入验证码！",
						type: 'error'
					});
				} else {
					if ((this.neweditForm.cardCode != null && this.neweditForm.cardCode != '') && (this.neweditForm
							.codepwd == null || this.neweditForm.codepwd == '')) {
						this.$message({
							message: "请输入密码！",
							type: 'error'
						});
					} else {
						if(this.wxid!=null&&this.wxid!=""&&this.wxid!=undefined){
							console.log("wxid不为空"+this.wxid)
							this.neweditForm.openid=this.wxid
						}
						request({
							method: 'POST',
							url: 'sysUser/register',
							data: this.neweditForm,
							params: {
								code: this.code,
								codepwd: this.neweditForm.codepwd
							}

						}).then(msg => {
							if (msg.code == 0 || msg.code == 200) {
								this.$message({
									message: msg.msg,
									type: 'success'
								});
								this.activeName = "first"
								this.mendaostu.name=this.neweditForm.nickName
								this.mendaostu.major=this.neweditForm.majorType
								this.mendaostu.school=this.neweditForm.school
								// this.getuser()
							} else {
								this.$message({
									message: msg.msg,
									type: 'error'
								});
							}
						})
					}

				}

			},
			// getuser(){
			// 	request({
			// 		method: 'get',
			// 		url: 'sysUser/getUser',
			// 		params: {
			// 			phone:this.neweditForm.phone
			// 		}
			// 	}).then(result => {
			// 		if(result.code==0||result.code==200){
			// 			this.mendaostu.userId=result.data.userId
			// 			this.savestu()
			// 		}
			// 	})
			// },
			// savestu() {
			// 	console.log("同时注册学生"+this.mendaostu)
			// 		request({
			// 			method: 'POST',
			// 			url: 'students/saveOrUpdateArchives',
			// 			data: this.mendaostu
			// 		}).then(result => {
			// 		})
			// },
			login() {
				const _this = this
				request({
					method: 'POST',
					url: 'sysUser/login',
					data: this.neweditForm,
					params: {
						phone: _this.phone,
						code: this.dcode
					}
				}).then(msg => {
					if (msg.code == 0 || msg.code == 200) {
						this.$message({
							message: "登录成功！",
							type: msg.msg
						});
						console.log("进来了")
						this.reload();
						sessionStorage.setItem(msg.data.tokenInfo.tokenName, msg.data.tokenInfo.tokenValue)
						sessionStorage.setItem('userId', msg.data.user.userId)
						sessionStorage.setItem('user', JSON.stringify(msg.data.user))
						this.$store.dispatch('login', msg.data)
						this.$router.push({
							name: 'Home'
						});
					} else {
						this.$message({
							message: msg.msg,
							type: 'error'
						});
					}

				})
			},
		},
		created() {
			// const code=this.$route.params.wxcode;
			// if (this.$route.params.code != null) {
			// 	code = this.$route.params.code
			// 	console.log("接收到了")
			// }
			// if(code!=null&&code!=''&&code!=undefined){
			// 	console.log("传过来了")
			// 	request({
			// 		method: 'post',
			// 		url: 'sysUser/getAccessToken',
			// 		params: {
			// 			code: code
			// 		}
			// 	}).then(res => {
			// 		const weix = JSON.parse(res.msg)	
			// 		if (weix.hasOwnProperty('openid')) {
			// 			console.log("我存了")
			// 			this.wxid=weix.openid
			// 			this.wxlogin()
			// 		}
			// 	})
			// }

			
		}



	}
</script>

<style>
	.t1 {
/* 		overflow-x: hidden;
		overflow-y: hidden; */
		width: 1440px;
		min-width: 1440px;
		margin: auto;
		padding: 0;
	}



	.div2 {
		margin: auto;
		margin-top: 30px;
	}


	.t1 .ipt {
		font-size: 15px;
		width: 260px;
		border-radius: 5px;
		height: 36px;
		background-color: coral;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		border: 1px solid transparent;
		font-weight: 900;
		margin-top: 10px;
		margin-left: 60px;
	}

	.t1 #tab-first {
		width: 720px;
		text-align: center;
	}

	.t1 #tab-second {
		width: 720px;
		text-align: center;
	}

	.t1 input {
		border: 1px #68696a solid;
		border-radius: 5px;
		height: 35px;
	}

	#tpl_for_iframe {
		margin-left: 40%;
	}
	.t1 .el-input__prefix{
		display: none;
	}
	.t1 .el-input--prefix .el-input__inner{
		padding: 0;
	}
	.t1 .el-input__inner{
		padding: 0;
	}
	input::-webkit-input-placeholder { color: #c0c4cc; } 
	input::-moz-input-placeholder { color: #c0c4cc; } 
	input::-ms-input-placeholder { color: #c0c4cc; }
</style>
